<template>
  <!-- VIVOAPP推广 折线图 -->
  <div class="card_box">
    <!-- <div class="time_box">
      <el-date-picker
      style="width: 260px;"
        v-model="timerange"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button style="margin-left:10px" type="primary" @click="getData">搜索</el-button>
    </div> -->
    <div id="tuiguagChartsline3"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { getAppTuiguangShuju } from "@/api/tenantApis/indexStatistics.js";
export default {
  name: "",
  props:['startTime','endTime'],
  data() {
    return {
      myChart1: null,
      xData: [
        "2024-06-01",
        "2024-06-02",
        "2024-06-03",
        "2024-06-04",
        "2024-06-04",
        "2024-06-04",
        "2024-06-04",
        "2024-06-04",
        "2024-06-04",
      ],

      zhuceNumList: [142, 265, 186, 654, 422, 896, 268, 324, 183],
      jihuoNumList: [234, 284, 186, 654, 422, 896, 268, 324, 183],
      zhifuNumList: [344, 533, 233, 654, 422, 896, 268, 324, 183],
      zixunNumList: [345, 543, 342, 654, 422, 896, 268, 324, 183],
      total: 0,
      timerange:[]
    };
  },
  created() {},
  mounted() {
    // // 默认一月时间
    // // 获取最近三十天的日期范围
    // const endDate = new Date();
    // const startDate = new Date();
    // startDate.setDate(startDate.getDate() - 30);

    // const formatDate = (date) => {
    //   const year = date.getFullYear();
    //   const month = String(date.getMonth() + 1).padStart(2, '0');
    //   const day = String(date.getDate()).padStart(2, '0');
    //   return `${year}-${month}-${day}`;
    // };

    // this.timerange = [formatDate(startDate), formatDate(endDate)];

    this.$nextTick(() => {
      var chartDom = document.getElementById("tuiguagChartsline3");
      this.myChart1 = echarts.init(chartDom);
      // this.getData();
      // setTimeout(() => {
      //   this.initCharts1();
      // }, 1000);
    });
  },
  watch:{
    startTime: {
      handler(newVal) {
        if(newVal){
        this.getData();
      }
      },
      immediate: true,
    },
  },
  methods: {
    getData() {
      const obj = {
        xyType: "vivo",
        startTime:this.startTime||'',
        endTime: this.endTime||'',
      };
      if(this.timerange.length==2){
        obj.startTime = this.timerange[0]+' 00:00:00'
        obj.endTime = this.timerange[1]+' 23:59:59'
      }else{
        obj.startTime = ''
        obj.endTime = ''
      }
      getAppTuiguangShuju(obj).then((res) => {
        this.xData = [];
        this.zhuceNumList = [];
        this.jihuoNumList = [];
        this.zixunNumList = [];
        this.zhifuNumList = [];
        if (res.data && res.data.length) {
          res.data.forEach((r) => {
            this.xData.push(r.date);
            this.jihuoNumList.push(r.active);
            this.zhuceNumList.push(r.register);
            this.zixunNumList.push(r.consulting);
            this.zhifuNumList.push(r.pay);
          });
        }
        this.initCharts1();
      });
    },
    initCharts1() {
      const colors = [
        "rgb(108, 93, 211)",
        "rgb(127, 186, 122)",
        "rgb(255, 225, 0)",
        "rgb(255, 162, 192)"
      ];

      let option = {
        title: {
          show: false,
          text: `总注册量:人`,
          top: 20,
          // left:'center',
          right: "center",
          textAlign: "center",
          textStyle: {
            fontSize: 16,
            fontWeight: "normal",
            rich: {
              a: {
                color: "#6C5DD3",
                fontSize: 24,
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        color: colors,
        legend: {
          show: true,
          top: '30px',
          left: 'center',
          data: [
            {
              name: "激活",
              textStyle: {
                color: colors[0],
              },
            },
            {
              name: "注册",
              textStyle: {
                color: colors[1],
              },
            },
            {
              name: "咨询",
              textStyle: {
                color: colors[2],
              },
            },
            {
              name: "支付",
              textStyle: {
                color: colors[3],
              },
            },
          ],
        },
        grid: {
          left: "50",
          right: "30",
          top: "80",
          bottom: "26",
        },

        xAxis: [
          {
            name: "",
            type: "category",
            axisTick: { show: false },
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#EAEBF0",
              },
            },
            nameTextStyle: {
              color: "#333",
            },
            axisLabel: {
              color: "#333",
              align: "center",
              showMaxLabel: false,
            },

            data: this.xData,
          },
        ],
        yAxis: [
          {
            name: "数量",
            type: "value",
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#D2D2D2",
              },
            },
            axisLabel: {
              color: "#333",
              // formatter: '{value} 单'
            },
            splitLine: {
              lineStyle: {
                color: "#EAEBF0",
                type: "dotted",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "激活",
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30",
            data: this.jihuoNumList,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(108, 93, 211,0.5)" },
                { offset: 1, color: "rgba(108, 93, 211,0)" },
              ]),
            },
          },
          {
            name: "注册",
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30",
            data: this.zhuceNumList,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(127, 186, 122,0.5)" },
                { offset: 1, color: "rgba(127, 186, 122,0)" },
              ]),
            },
          },
          {
            name: "咨询",
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30",
            data: this.zixunNumList,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(255, 225, 0,0.5)" },
                { offset: 1, color: "rgba(255, 225, 0,0)" },
              ]),
            },
          },
          {
            name: "支付",
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            barMaxWidth: "30",
            data: this.zhifuNumList,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(255, 162, 192,0.5)" },
                { offset: 1, color: "rgba(255, 162, 192,0)" },
              ]),
            },
          },
        ],
      };
      this.myChart1 && option && this.myChart1.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.card_box{
  position: relative;
  .time_box{
   position: absolute;
   top: -25px;
   right: 0;
  }
}
#tuiguagChartsline3 {
  width: 100%;
  height: 400px;
}
</style>
